<template>
	<view class="center" :model="form">
		<u--form>
			<u-form-item label="托盘号" borderBottom ref="item1" :borderBottom="false">
				<u--input v-model="form.palletNo" border="none" inputAlign="right" @blur="getDalletNoList"></u--input>
			</u-form-item>
		</u--form>

		<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
			<u-form-item label="工单编号" borderBottom ref="item1" :borderBottom="false">
				<u--input v-model="formData.workorderCode" border="none" disabled inputAlign="right"
					disabledColor="#fff"></u--input>
			</u-form-item>
			<u-form-item label="组件数量" borderBottom ref="item1" :borderBottom="false">
				<u--input v-model="formData.packCount" border="none" disabled inputAlign="right"
					disabledColor="#fff"></u--input>
			</u-form-item>
			<u-form-item label="单位" borderBottom ref="item1" :borderBottom="false">
				<u--input v-model="trayNumber" border="none" disabled inputAlign="right"
					disabledColor="#fff"></u--input>
			</u-form-item>
			<u-form-item label="状态" borderBottom ref="item1" :borderBottom="false">
				<u--input v-model="formData.state" border="none" disabled inputAlign="right"
					disabledColor="#fff"></u--input>
			</u-form-item>
		</u--form>
		<view class="button" @click="submit">
			<span>确定出库</span>
		</view>

	</view>
</template>

<script>
	import {
		getDalletNoList,
		stockRemoval
	} from '@/api/stockRemoval/tray/index.js'
	export default {
		data() {
			return {
				form: {
					palletNo: null, //托盘号
				},
				formData: {
					workshop: null,
					state: null,
					packCount: null
				},
				trayNumber: null,
				rules: []
			};
		},
		created() {

		},
		methods: {
			// 查询托盘信息
			getDalletNoList() {
				let palletNo = this.form.palletNo
				getDalletNoList({
					palletNo
				}).then(res => {
					
					if(res.rows){
						if(res.rows.length >= 1){
							// 有该托盘会返回数据
							if (res.rows.length >= 1) {
								this.formData = res.rows[0]
								this.trayNumber = '片'
							} else {
								// 没有这个托盘号会返回一个空数组，不做处理
								// 清空表单
								this.formData = {
									workshop: null,
									trayNumber: null,
									state: null,
									packCount: null
								}
								this.trayNumber = null
							}
						}else{
							uni.showToast({
								icon: 'error',
								title: '托盘号不存在！'
							})
						}
					}else{
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}


				})
			},
			// 清空表单
			set() {
				this.form = {
					palletNo: null //托盘号
				}
				this.formData = {
					workshop: null,
					state: null,
					packCount: null
				}
				this.trayNumber = null
			},
			// 托盘出库
			submit() {
				let palletNo = this.form.palletNo
				stockRemoval({
					palletNo
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '出库成功！'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.center {
		padding: 0 10px;
	}

	::v-deep .u-form-item {
		margin-top: 10px;
		height: 48px;
		opacity: 1;
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 4px 0px rgba(30, 36, 54, 0.03);

	}

	::v-deep .u-form-item__body__left {
		width: 150px !important;
		padding-left: 10px;
	}

	::v-deep .u-form-item__body__right {
		padding-right: 10px;
	}

	.button {
		margin: 48px auto;
		width: 100%;
		height: 48px;
		opacity: 1;
		border-radius: 60px;
		background: linear-gradient(90deg, rgba(17, 171, 247, 1) 0%, rgba(64, 118, 254, 1) 100%);

		span {
			display: block;
			width: 64px;
			height: 24px;
			opacity: 1;
			/** 文本1 */
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 48px;
			color: rgba(255, 255, 255, 1);
			margin: 0 auto;
		}
	}
</style>